<%--
  Created by IntelliJ IDEA.
  User: 86156
  Date: 2024/12/23
  Time: 10:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入elementUI的css--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <%--在引入elementUI之前必须引入vue--%>
    <script src="http://unpkg.com/vue@2/dist/vue.js"></script>
    <%--import JavaScript--%>
     <script src="http://unpkg.com/element-ui/lib/index.js"></script>
    <%--axios--%>
     <script src="/js/axios.min.js"></script>
</head>
<body>
<%----%>
   <div id="app">
       <%--
           el-button: 按钮组件
           type： 按钮类型
           icon：按钮图标
           size：按钮大小
           @click： 点击按钮触发事件
       --%>
       <el-button type="primary" icon="el-icon-plus" size="small" @click="addEmp()">添加</el-button>
       <%--添加对话框的开始
       title：对话框标题
       visible.sync：对话框是否显示
       --%>
       <el-dialog title="添加员工" :visible.sync="dialogFormVisible" @close="addClose()">
           <el-form :model="addEmpForm" :rules="addEmpFormRule" ref="addEmpFormRef">
               <%--
               el-form-item:表单行组件
               --%>
               <el-form-item label="员工姓名" label-width="120px" prop="empName">
                   <el-input v-model="addEmpForm.empName" autocomplete="off"></el-input>
               </el-form-item>
               <el-form-item label="员工岗位" label-width="120px" prop="empJob">
                   <el-input v-model="addEmpForm.empJob" autocomplete="off"></el-input>
               </el-form-item>
               <el-form-item label="员工薪资" label-width="120px" prop="empSalary">
                   <el-input v-model="addEmpForm.empSalary" autocomplete="off"></el-input>
               </el-form-item>
               <el-form-item label="员工部门" label-width="120px" prop="did">
                   <el-select v-model="addEmpForm.did" placeholder="请选择员工部门">
                       <el-option v-for="d in depts" :label="d.deptName" :value="d.deptId"></el-option>
                   </el-select>
               </el-form-item>
           </el-form>

           <div slot="footer" class="dialog-footer">
               <el-button @click="dialogFormVisible = false">取 消</el-button>
               <el-button type="primary" @click="confirmAddEmp()">确 定</el-button>
           </div>
       </el-dialog>
           <%--添加对话框的结束--%>

           <%--添加对话框的开始--%>
       <el-dialog title="编辑员工" :visible.sync="dialogFormVisible2">
           <%--
           el-form:表单组件
           model:表单数据对象。
           --%>
           <el-form :model="editEmpForm" :rules="addEmpFormRule" ref="editEmpFormRef">
               <%--
               el-form-item ：表单行组件
               --%>
               <el-form-item label="员工姓名" label-width="120px" prop="empName">
                   <el-input v-model="editEmpForm.empName" autocomplete="off"></el-input>
               </el-form-item>
               <el-form-item label="员工岗位" label-width="120px" prop="empJob">
                   <el-input v-model="editEmpForm.empJob" autocomplete="off"></el-input>
               </el-form-item>
               <el-form-item label="员工薪资" label-width="120px" prop="empSalary">
                   <el-input v-model="editEmpForm.empSalary" autocomplete="off"></el-input>
               </el-form-item>
               <el-form-item label="员工部门" label-width="120px" prop="did">
                   <el-select v-model="editEmpForm.did" placeholder="请选择员工部门">
                       <el-option v-for="d in depts" :label="d.deptName" :value="d.deptId"></el-option>
                   </el-select>
               </el-form-item>
           </el-form>

           <div slot="footer" class="dialog-footer">
               <el-button @click="dialogFormVisible2 = false">取 消</el-button>
               <el-button type="primary" @click="confirmEditEmp()">确 定</el-button>
           </div>
       </el-dialog>
           <%--编辑对话框的结束--%>

           <%--
           el-table：表格组件
           :data:绑定表格数据
           border：表格边框
           --%>

     <el-table
             :data="emps"
             border
             style="width: 100%">
         <%--
             el-table-column：表格列组件
             prop：表格列绑定的数据源--应该和返回的数据的属性名匹配
             label：列标题
             width：列宽
         --%>
       <el-table-column
               prop="empId"
               label="编号"
               width="180">
       </el-table-column>
         <%--<el-table-column
                 label="头像"
                 width="60">
             <template slot-scope="scope">
                 <img :src="scope.row.empHead" width="50"/>
             </template>
         </el-table-column>--%>
       <el-table-column
               prop="empName"
               label="姓名"
               width="180">
       </el-table-column>
       <el-table-column
               prop="empSalary"
               label="薪资">
       </el-table-column>
       <el-table-column
               prop="empJob"
               label="岗位">
       </el-table-column>
       <el-table-column
               prop="dept.deptName"
               label="所属部门">
       </el-table-column>
         <el-table-column
                 fixed="right"
                 label="操作"
                 width="250">
             <template slot-scope="scope">
                 <el-button type="danger" icon="el-icon-delete" size="small" @click="del(scope.row.empId)">删除</el-button>
                 <el-button type="primary" icon="el-icon-edit" size="small" @click="edit(scope.row)">编辑</el-button>
             </template>
         </el-table-column>
     </el-table>
   </div>

</body>
<script>
  let app=new Vue({
    el:"#app",
    data:{
      emps:[],//存放所有员工数据
      depts:[],//存放所有部门的数据
      dialogFormVisible:false,//控制添加对话框是否显示
      dialogFormVisible2:false,//控制编辑对话框是否显示
      editEmpForm:{},//表示编辑员工数据
      addEmpForm:{
          empName:null,
          empJob:null,
          empSalary:null,
          did:null,
      },//表示添加员工数据
        addEmpFormRule:{
            empName: [
                //required： 是否必须输入 message:提示信息 trigger:触发方式
                { required: true, message: '请输入员工姓名', trigger: 'blur' },
                { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
            ],
            empJob: [
                { required: true, message: '请输入员工岗位', trigger: 'blur' },
            ],
            empSalary: [
                { required: true, message: '请输入员工薪资', trigger: 'blur' },
                { pattern: /^\d+(\.\d+)?$/, message: '薪资必须为数字', trigger: 'blur' }
            ],
            did: [
                { required: true, message: '请选择员工部门', trigger: 'change' }
            ]
        }
    },
    created(){
      this.loadEmp();//页面加载完毕就执行loadEmp方法
      this.loadDept();//页面加载完毕就只想loadDept方法
    },
    methods:{
        addClose(){
            this.$refs.addEmpFormRef.resetFields();
        },
        //编辑按钮事件
        edit(row){
            this.dialogFormVisible2=true;
            this.editEmpForm=row;
        },
        //确认修改
        confirmEditEmp(){
            axios.post("/emp/confirmUpdate",this.editEmpForm).then(msg=>{
                if(msg.data===1){
                    //提示修改成功
                    this.$message.success("修改成功")
                    //刷新数据
                    this.loadEmp();
                    //关闭对话
                    this.dialogFormVisible2=false;
                }
            })
        },

        //确认添加
        confirmAddEmp(){
            //添加和修改
            this.$refs.addEmpFormRef.validate(valid=>{
                if(valid){
                    axios.post("/emp/confirmAdd",this.addEmpForm).then(msg=>{
                        if(msg.data===1){
                            //提示添加成功
                            this.$message.success("添加成功")
                            //关闭对话框
                            this.dialogFormVisible=false;
                            //刷新数据
                            this.loadEmp();
                            //清空表单
                            //this.$refs.addEmpFormRef.resetFields();
                            this.addEmpForm={};
                        }
                    })
                }
            })
            },
        //加载所有的部门信息
        loadDept(){
            axios.get("/dept/listJson").then(msg=>{
                this.depts=msg.data;
            })
        },
      loadEmp(){
            //msg:表示服务器响应时的数据，axios把响应的数据进行了封装。
        axios.get("/emp/listJson").then(msg=>{
          this.emps=msg.data;
        })
      },
        //添加按钮触发的方法
        addEmp(){
            this.dialogFormVisible=true;
        },
        //删除按钮触发的方法
        del(id){
          this.$confirm('此操作将永久删除文件, 是否继续?', '提示',{
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
                //执行删除操作
              axios.get("/emp/delete?id="+id).then(msg=>{
                if(msg.data===1){
                    //删除成功
                    this.loadEmp();
                    //提示
                    this.$message.success("删除成功")
                }else{
                    //提示
                    this.$message.error("删除失败")
                }
              })

            })
        }

    }
  })
</script>
</html>
